﻿<!DOCTYPE html>  
 <html>  
<head>  
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  
<style type="text/css">  
 #preview, .img, img  
 {  
 width:200px;  
 height:200px;  
 }  
 #preview  
 {  
border:1px solid #000;  
}  
 </style>  
 </head>  
<body>  
 <div id="preview"></div>  
<input type="file" onchange="preview(this,'preview')" />  

 <script type="text/javascript">    
function preview(file,id){  
	var prevDiv = document.getElementById(id);  
	if (file.files && file.files[0]){  
		 var reader = new FileReader();  
		 reader.onload = function(evt){  
		 prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';  
		}    
		 reader.readAsDataURL(file.files[0]);  
	}else{  
	prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\')"></div>';  
	}  
}  
 </script>  
 </body>  
 </html>  